<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份:<select name="" id="provinceid" onchange="provincechange()">
			<option value="-1">请选择省份</option>
		</select>
		城市:<select name="" id="cityid" onchange="citychange()">
			<option value="-1">请选择城市</option>
		</select>
		<br />
		你的选择是:<label id="selectvalue"></label>
	</body>
	<script type="text/javascript">
		var provinces = ['福建省','广州省','浙江省'];
		var citys = [
			['福州市','龙岩市'],
			['广州市','深圳市','东莞市'],
			['杭州市','温州市']
		];
		var arers = [
			[
				['福州1','福州2'],
				['新罗1','新罗2']
			],
			[
				['广州市1','广州市2'],
				['深圳市1','深圳市2','深圳市3'],
				['深圳市1','深圳市2']
			],
			[
				['杭州市1','杭州市2'],
				['温州市1','温州市2']
			]
		]
		function provincechange(){
			var provincevalue = document.getElementById('provinceid').value;
			var cityobj = document.getElementById('cityid');
			cityobj.innerHTML = `<option value="-1">请选择城市</option>`;
			if(provincevalue==-1){
				return;
			}
			for(var i=0;i<citys[provincevalue].length;i++){
				cityobj.innerHTML+=`<option value="`+i+`">`+citys[provincevalue][i]+`</option>`;
			}
		}
		function citychange(){
			var provalue = document.getElementById('provinceid').value;
			var cityvalue = document.getElementById('cityid');
			var provincename = provinces[provalue];
			var cityname = citys[provalue][cityvalue.value];
			
			
			
			document.getElementById('selectvalue').innerHTML=provincename+`-`+cityname;
		}
		onload = function(){
			var provinceobj = document.getElementById('provinceid');
			for(var i=0;i<provinces.length;i++){
				provinceobj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`
			}
			
		}
	</script>
</html>
